<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href=""> <img src="./img/1 (1).webp" alt=""> </a>
		<a href=""> <img src="./img/1 (2).webp" alt=""> </a>
		<a href=""> <img src="./img/1 (3).webp" alt=""> </a>
		<a href=""> <img src="./img/1 (4).webp" alt=""> </a>
		<a href=""> <img src="./img/1 (5).webp" alt=""> </a>
	</body>
	<style lang="scss" scoped>
		*{
			padding: 0;
			margin: 0;
		}
		
		html{
			font-size: 62.5%;
		}
		
		body{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
		}
		
		img{
			background-color: bisque;
			height: 60rem;
			width: 10rem;
			margin: 1rem;
			border-radius: 20rem;
			
			object-fit: cover;
			
			--expand-width:60rem;
			--shrink-width:10rem;
			--expand-radius:3.6rem;
			--shrink-radius:20rem;
		}
		a:nth-child(1) img{
			animation: swiper 30s infinite;
		}
		a:nth-child(2) img{
			animation: swiper 30s 6s infinite;
		}
		a:nth-child(3) img{
			animation: swiper 30s 12s infinite;
		}
		a:nth-child(4) img{
			animation: swiper 30s 18s infinite;
		}
		a:nth-child(5) img{
			animation: swiper 30s 24s infinite;
		}
		
		@keyframes swiper{
			0%{
				width: var(--shrink-width);
				border-radius: var(--shrink-radius);
			}
			1%{
				width: var(--expand-width);
				border-radius: var(--expand-radius);
			}
			20%{
				width: var(--expand-width);
				border-radius: var(--expand-radius);
			}
			21%{
				width: var(--shrink-width);
				border-radius: var(--shrink-radius);
			}
			100%{
				width: var(--shrink-width);
				border-radius: var(--shrink-radius);
			}
		}
	</style>
</html>